<!--
 * @Descripttion: 
 * @version: 
 * @Author: hhy
 * @Date: 2021-05-11 17:08:07
 * @LastEditors: hhy
 * @LastEditTime: 2021-05-17 14:51:08
 * @FilePath: \votemp-user-pc\src\components\common\h-bgi.vue
-->
<template>
  <div :style="style" class="h-bgi" @click="$emit('click')">
    <img :src="img" alt="" v-if="img && !bgi" />
    <slot />
  </div>
</template>
<script>
import { defineComponent, computed } from "vue";
import { osshost } from "@/utils/utils";
export default defineComponent({
  props: {
    bgi: {
      type: String,
      default: "",
    },
    w: {
      type: String,
      default: "100%",
    },
    h: {
      type: String,
      default: "44",
    },
    inline: {
      type: Boolean,
      default: false,
    },
    img: {
      type: String,
      default: "defaultAvatar",
    },
  },
  setup(props) {
    const style = computed(() => {
      let bgi = `url(${props.bgi})`;
      return {
        backgroundImage: bgi + "!important",
        display: props.inline ? "inline-block" : "block",
        width: props.w.match("%") ? props.w : props.w + "px",
        height: props.h.match("%") ? props.h : props.h + "px",
      };
    });
    return {
      style,
    };
  },
});
</script>
<style lang="scss">
.h-bgi {
  @include bgi;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: #f2f2f2;
  img {
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .bgi-hover {
    @include flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }
}
</style>
